<template>
        <div id="conment">
            <a id="pinlun"></a>
            <div class="conmentTitle">
                <div class="conmentTitle1">{{comments.length}}条评论</div>
                <div class="conmentTitle2">时间</div>
                <div class="conmentTitle3">点赞数</div>
            </div>
            <div class='conmentmain'>
                <div class="conmentown">
                    <div class="conmentownimg" v-if="!none"><img src="../assets/images/no.jpg"  alt=""></div>
                    <div class="conmentownimg" v-if="none"><img :src="`http://localhost:3000/upload/${own.headImg}`"  alt=""></div>
                    <div class="conmentowntext"><input class='uptxt' type="text" placeholder="撰写评论" v-model="submitval"></div>
                    <el-button type="primary" class="conmentownup" @click="submit()" >提交评论</el-button>
                </div>
                <div style="clear: both;"></div>
                <div v-for="comment in comments" :key="comment.uId">
                    <div class="conmentother" >
                        <div class="conmentownimg"><img :src="`http://localhost:3000/upload/${comment.headImg}`"  alt=""></div>
                        <div class="conmentothername"><router-link tag="span"  :to="{path:'/UserOthDynamic',query:{uid:comment.uId}}">{{comment.nickName}}</router-link> <span style="color: black;"> </span> <p></p></div>
                        <div class='conmentothertext'><div v-html="comment.content" > </div></div>
                    </div>
                    <div class="conmentothertime">
                        <svg t="1600085653527" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6436" width="20" height="20"><path d="M499.432727 886.225455h-192.465454c-12.8 0-23.272727-10.472727-23.272728-23.272728s10.472727-23.272727 23.272728-23.272727h192.465454c12.8 0 23.272727 10.472727 23.272728 23.272727s-10.472727 23.272727-23.272728 23.272728z" fill="#707070" p-id="6437"></path><path d="M306.734545 886.225455H165.236364c-25.6 0-46.545455-20.945455-46.545455-46.545455V462.196364c0-25.6 20.945455-46.545455 46.545455-46.545455h141.498181c12.8 0 23.272727 10.472727 23.272728 23.272727v424.029091c0 12.8-10.24 23.272727-23.272728 23.272728zM165.236364 462.196364v377.483636h118.225454V462.196364H165.236364z" fill="#707070" p-id="6438"></path><path d="M737.978182 886.225455h-114.967273c-12.8 0-23.272727-10.472727-23.272727-23.272728s10.472727-23.272727 23.272727-23.272727h114.967273c11.636364 0 21.643636-8.378182 23.505454-20.014545l54.923637-329.774546c1.163636-6.981818-0.698182-13.963636-5.352728-19.316364-4.654545-5.352727-11.170909-8.378182-18.152727-8.378181h-224.116363c-21.643636 0-42.356364-11.403636-52.596364-28.858182-8.843636-14.894545-8.843636-32.116364-0.232727-47.243637 28.392727-50.269091 46.545455-171.054545 33.047272-190.138181-4.654545-4.421818-11.869091-10.472727-18.618181-10.472728-6.516364 0-13.963636 5.818182-18.85091 10.938182-3.258182 4.421818-11.869091 27.229091-18.850909 45.614546-30.952727 82.385455-83.083636 220.392727-186.181818 220.392727-12.8 0-23.272727-10.472727-23.272727-23.272727s10.472727-23.272727 23.272727-23.272728c70.981818 0 117.527273-123.810909 142.661818-190.138181 13.730909-36.305455 20.014545-52.829091 29.323637-62.138182 32.581818-32.581818 71.214545-32.349091 103.563636 0 40.029091 40.029091 1.629091 196.654545-25.832727 245.527272 0 2.094545 4.887273 6.749091 12.334545 6.749091h224.116364c20.712727 0 40.261818 9.076364 53.76 24.901819s19.083636 36.538182 15.592727 57.018181L807.563636 827.345455a70.283636 70.283636 0 0 1-69.585454 58.88z" fill="#707070" p-id="6439"></path></svg>
                        <span>{{comment.likes}}</span>个 &nbsp;· <span>{{comment.tTime | time}}</span> 
                    </div>
                </div>
                
            </div>
        </div>
</template>
<script>
export default {
    data(){
        return {
             submitval:'',
             aid: '',
             comments:'',
             ownuids:'',
             own:'',
             none:false
            }
    },
    created(){
      this.ownuids=this.$store.state.ownUid
      if(this.ownuids){
          this.none=true
      }
      this.aid=this.$route.query.aid
    //   console.log(this.aid)
      this.$axios.get('/api/article/comment',{params:{aid:this.aid}})
        .then(res=>{
            // console.log('res:',res.data.data[0])
            this.comments=res.data.data
            console.log(this.comments)
        })
        .catch(err=>{
          console.log('err:',err)
        })
      this.$axios.get('/api/nav/img',{params:{uid:this.ownuids}})
        .then(res=>{
            this.own=res.data.data[0]
            // console.log('own',this.own)
        })
        .catch(err=>{
          console.log('err:',err)
        })
    },
    methods:{
        submit(){
          this.$message({
                                        showClose: true,
                                        message: '评论成功',
                                        type: 'success'});
            console.log('ownss')
            var date=new Date();
            this.comments.push({tid:this.aid,content:this.submitval,uid:this.ownuids,tTime:date.toLocaleDateString(),likes:0,headImg:this.own.headImg,nickName:this.own.nickName })
            console.log(comments)
            this.$axios.get('/api/article/commentown',{params:{tid:this.aid,
                                                                content:this.submitval,
                                                                uid:this.ownuids,
                                                                tTime:date.toLocaleDateString(),
                                                                likes:0, 
                                                    }})
            .then(res=>{
                console.log('1')
                
                    
            })
            .catch(err=>{
                console.log('err:',err)
            })
            this.submitval=''
        }
    },
    filters:{
      time:function(value){
         let pTime=[]
        for(let i=0;i<value.length;i++){
          if(value[i]!='T'){
            pTime.push(value[i])
          }else{
            break 
          }
        }
        let pTimes=pTime.join('')
        return pTimes
      }
    }
}
</script>